<link rel="stylesheet" href="/assets/css/index.css"/>

<!-- 首页主要结构 -->
<div class="mui-content">
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            {foreach $hotList as $item}
            <div class="swiper-slide" style="height: 300px;object-fit: cover">
                <a href="{:url('/home/subject/subject/info',['subid'=> $item.id])}">
                    <img src="{$item.thumbs_cdn}" alt="{$item.title}">
                    <p class="mui-slider-title">{$item.title}</p>
                </a>
            </div>
            {/foreach}
        </div>
        <div class="swiper-pagination" style="text-align: right;"></div>
    </div>
</div>

<div class="mui-content">
    <h5 class="title">精选课程</h5>
    <ul class="mui-table-view mui-grid-view">
        {foreach $SubjectList as $item}
        <li class="mui-table-view-cell mui-media mui-col-xs-6">
            <a href="{:url('/home/subject/subject/info',['subid' => $item.id])}">
                <div class="imgs">
                    <img class="mui-media-object" src="{$item.thumbs_cdn}" alt="{$item.title"
                         style="height: 120px;object-fit: cover">
                </div>
                <div class="mui-media-body">{$item.title}</div>
            </a>
        </li>
        {/foreach}
    </ul>
</div>

<!-- 引入底部 -->
{include file='common/footer'/}

<script>
    const swiper = new Swiper(".mySwiper", {
        pagination: {
            el: ".swiper-pagination",
        },
    });
</script>